<template>
    <div class="page-article">
        <div class="d-flex py-3 px-2 bottom">
            <router-link tag="div" to="/home" class="iconfont icon-back text-info" style="font-size:22px;"></router-link>
            <strong class="flex-1 text-info fs-xg">
                {{model.title}}
            </strong>
            <div class="fs-xs px-3">2021/9/23</div>
        </div>
        <div v-html="model.body" class="article-body px-3 fs-xl mb-3"></div>
        <div class="px-3 artcle-bottom py-2">
            <div class="d-flex ai-center">
                <i class="iconfont Menu"></i>
                <strong class="text-info fs-lg ml-1">相关资讯</strong>
            </div>
            <router-link class="p-3 over" tag="div" :to="`/articles/${items._id}`" 
            v-for="(items,i) in model.realtive" :key="i">{{items.title}}</router-link>
        </div>
    </div>
</template>

<script>
export default {
    name: 'VueArticle',
    props:{
        id:{require:true}
    },
    data() {
        return {
            model:{}
        }
    },
    watch:{
        id:'fetch'
        // 或者是:
       /*  id(){
            this.fetch()
        } */
    },
    methods: {
        async fetch(){
          const res = await this.$http.get(`articles/${this.id}`)
            this.model = res.data
        }
    },
    created() {
        this.fetch()
    },
};
</script>

<style lang="scss">
.bottom{
    border-bottom: 1px solid #d4d4d4;
}
.page-article{
    .article-body{
        img{
            max-width: 100%;
            height: auto;
    }
    iframe{
        max-width: 100%;
            height: auto;
    }
    .artcle-bottom{
        border-top: 1px solid #d4d4d4;
    }
}
    .over{
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
}
</style>